<template>
  <div class="userWrapper">
    <div class="userheader" @click="hanleLoginClick">
      <van-row type="flex">
        <van-col span="6" class="userImgBox"
          ><img :src="avatar" alt=""
        /></van-col>
        <van-col span="15">{{ nickname.slice(0, 20) }}</van-col>
        <van-col span="3"><van-icon name="arrow"/></van-col>
      </van-row>
    </div>
    <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 模态框 -->
    <div class="modal" v-if="isShowModal" @click.self="hanleLoginClick">
      <van-form @submit="onSubmit" class="login_box">
        <h3 class="login_tilte">登录</h3>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { GoLogin } from '../request/api.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      isShowModal: false,
      nickname: '用户登录',
      avatar: '../assets/avatar.png'
    }
  },
  created() {
    // 组件刚创建的时候判断用户有没有登录
    if (window.sessionStorage.getItem('token')) {
      const userInfo = JSON.parse(window.sessionStorage.getItem('useInfo'))
      const { nickname, avatar } = userInfo
      // console.log(userInfo)
      // console.log(nickname, avatar)
      this.nickname = nickname
      this.avatar = avatar
    }
  },
  methods: {
    hanleLoginClick() {
      if (!window.sessionStorage.getItem('token')) {
        this.isShowModal = !this.isShowModal
      }
    },
    onSubmit(values) {
      if (values.username && values.password) {
        //  发送请求
        GoLogin({ username: values.username, pwd: values.password }).then(
          res => {
            if (res.errno === 0) {
              this.$toast.success('登录成功')

              // 保存token值
              // 登陆的业务逻辑
              window.sessionStorage.setItem('token', res.data.token)
              window.sessionStorage.setItem(
                'useInfo',
                JSON.stringify(res.data.userInfo)
              )
              window.setTimeout(() => {
                this.isShowModal = !this.isShowModal
              }, 1000)

              this.nickname = res.data.userInfo.nickname
              this.avatar = res.data.userInfo.avatar
            }

            if (res.errno === 602) {
              this.$toast.fail(res.errmsg)
              this.password = ''
            }
          }
        )
      }
    }
  },
  watch: {
    nickname: function() {
      if (this.nickname !== '用户登录') {
        //
      }
    }
  }
}
</script>

<style lang="less" scoped>
.userWrapper {
  text-align: center;
}
.userheader {
  height: 1.1rem;
  line-height: 1rem;
  background: #111;
  color: #fff;
  .userImgBox {
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    img {
      width: 100%;
    }
  }
}
.modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  .login_box {
    width: 90%;
    background: rgba(255, 255, 255);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
    .login_tilte {
      height: 0.5rem;
      line-height: 0.5rem;
      letter-spacing: 0.2rem;
      font-size: 0.2rem;
    }
  }
}
</style>
